Defining Routes

Routes are defined in src/js/routes/index.js file and exported, Catalyst uses react-router-v6 based routing, so routes have to be defined accordingly.

For data fetching inside each routes, clientFetcher and serverFetcher functions have to be defined, they are explained in Data Fetching.

Components can be passed using 'component' key inside route object.

src/js/routes/index.js

const routes = [
    {
        path: "/",
        index: true,
        component: HomePage,
    },
    {
        path: "/cart",
        component: CartComponent,
        children: [{
          path:"",
          component: CartChild
        },
        {
          path:"prescription",
          component: Prescription
        }],
    },
    {
        path: "/health-products",
        component: HealthProducts,
    },
]

Note: Slash should not be prefixed while defining child route. For example: "prescription/new"